<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="java">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>新闻列表</title>
    <!--引用 news.css 样式文件  -->
    <link rel="stylesheet" type="text/css" href="/news.css"/>
    <style>
        /* 页面内的样式 */
        #table1 {
            width: 100%;
        }

        tr td {
            padding: 10px 10px;
        }

        .box tr td {
            padding: 0;
        }

        #table1 tr td.td_index {
            width: 10px;
        }

        .box {
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <h1>News Recommender System</h1>
    <p>
        当前位置：<a href="index">网站首页</a> >> <a
            th:href="'articleSearch?userId='+${user.id}">新闻列表</a>
    <div style="float: right;">
        <form action="articleSearch" method="post">
            <input type="hidden" name="userId" th:value="${user.id}">
            <label for="search">搜索:</label>
            <input id="search" type="text" name="searchWord" th:value="${searchWord}">
            <label>
                <select id="searchMethod" name="searchMethod">
                    <option id="like" value="like">模糊查询</option>
                    <option id="indexWord" value="indexWord">自定分词</option>
                    <option id="fulltext" value="fulltext">全文索引</option>
                </select>
                <select id="orderMethod" name="orderMethod" disabled>
                    <option id="freqs" value="freqs">默认排序</option>
                    <option id="tfidf" value="tfidf">tfidf</option>
                    <option id="bayes" value="bayes">bayes</option>
                </select>
            </label>
            <button type="submit">搜索</button>
        </form>
    </div>
    </p>
    <div id="content">
        <div id="main">
            <table id="table1">
                <h4>新闻列表</h4>
                <h6 th:text="'处理时间:'+${time}+'s'"></h6>
                <tr th:each="article,aricleIndex:${pageInfo.list}">
                    <td class="td_index" th:text="${pageInfo.pageNum-1}*10+${aricleIndex.count}"></td>
                    <td><a th:href="'articleView?articleId='+${article.id}+'&userId='+${user.id}"
                           th:text="${article.title}"></a>
                    </td>
                </tr>
            </table>
            <p>
                <a th:href="'articleSearch?userId='+${user.id}">刷新一下</a>
            </p>
            <form action="articleSearch" method="post">
                <input type="hidden" name="userId" th:value="${user.id}">
                <input type="hidden" name="searchWord" th:value="${searchWord}">
                <input type="hidden" name="searchMethod" th:value="${searchMethod}">
                <input type="hidden" name="orderMethod" th:value="${orderMethod}">
                <button type="submit" value="1" name="pageNum">首页</button>
                <button type="submit" th:value="${pageInfo.pageNum+1}" name="pageNum">下一页</button>
                <button type="submit" th:value="${pageInfo.pageNum-1}" name="pageNum">上一页</button>
            </form>
        </div>
        <div id="side">
            <div class="box">
                <tr>
                    <td>
                        <p>
                            <strong th:text="'当前用户：'+${user.username}"></strong>
                        </p>
                    </td>
                    <td><p th:text="'性别：'+${user.gender}"></p></td>
                    <td><p th:text="'出生年份：'+${user.birthYear}"></p></td>
                    <td><p th:text="'学历：'+${user.education}"></p></td>
                    <td><p th:text="'工作：'+${user.career}"></p></td>
                </tr>
            </div>
            <div class="box">
                <table>
                    <tr th:each="users,userIndex:${similarUser}">
                        <td class="td_index" th:text="${userIndex.count}"></td>
                        <td><p th:text="'姓名：'+${users.username}"></p></td>
                    </tr>
                </table>
            </div>
            <div class="box">
                <table>
                    <tr th:each="article,articleIndex:${guessList}">
                        <td class="td_index" th:text="${articleIndex.count}"></td>
                        <td><a th:href="'articleView?articleId='+${article.id}+'&userId='+${user.id}"
                               th:text="${article.title}"></a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
<script th:inline="javascript">
    if ([[${searchMethod}]]) {
        document.getElementById([[${searchMethod}]]).selected = true;
        if ([[${orderMethod}]]) {
            document.getElementById([[${orderMethod}]]).selected = true;
        }
        document.getElementById("orderMethod").disabled = document.getElementById("searchMethod").value !== "indexWord";
    }
    document.getElementById("searchMethod").onchange = () => {
        document.getElementById("orderMethod").disabled = document.getElementById("searchMethod").value !== "indexWord";
    }
</script>
</html>